

import React, { FC, useEffect, useRef ,useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Img from '@/assets/images/503.png'
import { SpanFace } from '../../utils/types'
import './index.scss'
import { useInterval , useCountDown } from 'ahooks';
import Dao from '../../components/Dao'


const BadServe:FC = () => {
    const bgstar:any  = useRef()
    const router = useNavigate()
    const [count,setCount ] = useState<number>(5)
    const [spanList,setSpanList] = useState<SpanFace[]>([])

    const getSpanListInit = ()=>{
        const width = bgstar.current.clientWidth 
        const height  = bgstar.current.clientHeight  
        
        

        for(var i=0;i<520;i++){
            var left = Math.random() * width ;
            var top = Math.random() * height ;

            var scale = Math.random() * 1.2
            var rate = Math.random() * 1.5 
            var r = Math.random() * 255;
            var g = Math.random() * 255;
            var b = Math.random() * 255;
            var opacity = Math.random() 

            spanList.push({
                left:left+'px',
                top:top+'px',
                animationDelay:rate+'s',
                transform:`scale(${scale})`,
                backgroundColor:`rgba(${r},${g},${b},${opacity})`
            })
        }

        setSpanList([...spanList])
    }

    
    const [countdown] = useCountDown({
        // targetDate,   // 目标时间 
        interval:1000,
        leftTime:10 * 1000,  // 剩余时间 
        onEnd: () => {
            //  router("/guide")
        },
    });
    // useInterval(()=>{
    //     if(count>0){
    //         setCount(count-1)
    //     }else{
            
    //         setCount(5)
    //         router('/guide')
    //     }
    // },1000)

    useEffect(()=>{
        getSpanListInit()
    },[])

    
    return (
        <div className='errorpage' id="bgstar" ref={bgstar} >
            <div className="down" onClick={()=>router('/guide')}>
                {Math.round(countdown/1000 )}S 剩余
            </div>
            <img src={Img}  className='myimg' alt="" />
            <Dao size="60px"  dtime={5} onEnd={()=>router('/guide')}  ></Dao>
            {
                spanList.map((item,index)=>{
                    return (
                        <span key={index} className='spandot' style={item} ></span>
                    )
                })
            }
        </div>
    )
}

export default BadServe